<page-header [title]="'编辑产品'">
    <ng-template #breadcrumb>
        <nz-breadcrumb>
            <nz-breadcrumb-item>产品信息</nz-breadcrumb-item>
            <nz-breadcrumb-item><a [routerLink]="['/prod/product']">产品资料</a></nz-breadcrumb-item>          
        </nz-breadcrumb>
    </ng-template>
    <ng-template #tab>
        <nz-tabset [nzSize]="'default'" [nzTabBarExtraContent]="extraTemplate">
            <nz-tab nzTitle="基本信息" (nzSelect)="changeTab(0)"></nz-tab>
            <nz-tab nzTitle="库存/价格" (nzSelect)="changeTab(1)"></nz-tab>
            <nz-tab nzTitle="其他" (nzSelect)="changeTab(2)"></nz-tab>
        </nz-tabset>
    </ng-template>
    <ng-template #extraTemplate>
        <button nz-button (click)="back()"><i class="anticon anticon-rollback"></i>返回产品资料</button>     
    </ng-template>
</page-header>

<nz-card [nzBordered]="false" *ngIf="tabIndex === 0">  
    <form nz-form>        
        <nz-form-item>
            <nz-form-label nzXs="24" nzSm="7" nzMd="4">产品图片</nz-form-label>
            <nz-form-control nzXs="24" nzSm="12" nzMd="20">
                <nz-upload
                    class = "goods-pic"
                    [nzAction]="uploadUrl"
                    nzListType="picture-card"
                    [nzShowUploadList]="false"
                    [nzBeforeUpload]="beforeUpload"
                    (nzChange)="handleChange(row, col, $event)"
                >
                    <i *ngIf="!product.img" class="anticon anticon-plus"></i>
                    <img *ngIf="product.img" [src]="picUrl" class="avatar">                    
                </nz-upload> 
            </nz-form-control>
        </nz-form-item>
        
        
        <nz-form-item>
            <nz-form-label nzXs="24" nzSm="7" nzMd="4">产品代号</nz-form-label>
            <nz-form-control nzXs="24" nzSm="12" nzMd="4">
                <input style="width: 240px;" type="text" name="productCd" nz-input [(ngModel)]="product.productCd">
            </nz-form-control>

            <nz-form-label nzXs="24" nzSm="7" nzMd="4">SAP</nz-form-label>
            <nz-form-control nzXs="24" nzSm="12" nzMd="4">
                <input style="width: 240px;" type="text" name="sap" nz-input [(ngModel)]="product.sap">
            </nz-form-control>
        </nz-form-item> 

        <nz-form-item>        
            <nz-form-label nzXs="24" nzSm="7" nzMd="4">品项</nz-form-label>
            <nz-form-control nzXs="24" nzSm="12" nzMd="4">
                <nz-select style="width: 240px;" [(ngModel)]="product.brandLine" name="brandLine" nzAllowClear nzShowSearch [nzPlaceHolder]="'请选择品项'">
                    <nz-option [nzLabel]="brand.text" [nzValue]="brand.value" *ngFor="let brand of brandLines"></nz-option>              
                </nz-select>
            </nz-form-control>

            <nz-form-label nzXs="24" nzSm="7" nzMd="4">分类</nz-form-label>
            <nz-form-control nzXs="24" nzSm="12" nzMd="4">
                <nz-select style="width: 240px;" [(ngModel)]="product.category" name="category" nzAllowClear nzShowSearch  [nzPlaceHolder]="'请选择分类'">
                    <nz-option [nzLabel]="category.text" [nzValue]="category.value" *ngFor="let category of categorys"></nz-option>              
                </nz-select>
            </nz-form-control>
        </nz-form-item>

        <nz-form-item>        
            <nz-form-label nzXs="24" nzSm="7" nzMd="4">品牌</nz-form-label>
            <nz-form-control nzXs="24" nzSm="12" nzMd="4">
                <nz-select style="width: 240px;" [(ngModel)]="product.brand" name="brand" nzAllowClear nzShowSearch [nzPlaceHolder]="'请选择品牌'">
                    <nz-option [nzLabel]="brand.text" [nzValue]="brand.value" *ngFor="let brand of brands"></nz-option>              
                </nz-select>
            </nz-form-control>

            <nz-form-label nzXs="24" nzSm="7" nzMd="4">年份</nz-form-label>
            <nz-form-control nzXs="24" nzSm="12" nzMd="4">
                <nz-select style="width: 240px;" [(ngModel)]="product.year" name="year" nzAllowClear nzShowSearch  [nzPlaceHolder]="'请选择年份'">
                    <nz-option [nzLabel]="year.text" [nzValue]="year.value" *ngFor="let year of years"></nz-option>              
                </nz-select>
            </nz-form-control>
        </nz-form-item>

        <nz-form-item>        
            <nz-form-label nzXs="24" nzSm="7" nzMd="4">款式</nz-form-label>
            <nz-form-control nzXs="24" nzSm="12" nzMd="4">
                <nz-select style="width: 240px;" [(ngModel)]="product.userGroup" name="userGroup" nzAllowClear nzShowSearch [nzPlaceHolder]="'请选择款式'">
                    <nz-option [nzLabel]="userGroup.text" [nzValue]="userGroup.value" *ngFor="let userGroup of userGroups"></nz-option>              
                </nz-select>
            </nz-form-control>
            
            <nz-form-label nzXs="24" nzSm="7" nzMd="4">定制</nz-form-label>
            <nz-form-control nzXs="24" nzSm="12" nzMd="4">
                <nz-select style="width: 240px;" [(ngModel)]="product.isCm" name="isCm" nzAllowClear nzShowSearch>
                    <nz-option [nzLabel]="isCm.text" [nzValue]="isCm.value" *ngFor="let isCm of isCms"></nz-option>              
                </nz-select>
            </nz-form-control>
        </nz-form-item>

        <nz-form-item>
            <nz-form-label nzXs="24" nzSm="7" nzMd="4">型号</nz-form-label>
            <nz-form-control nzXs="24" nzSm="12" nzMd="4">              
                <input style="width: 240px;" type="text" name="proStyle" nz-input [(ngModel)]="product.style">
            </nz-form-control>

            <nz-form-label nzXs="24" nzSm="7" nzMd="4">色号</nz-form-label>
            <nz-form-control nzXs="24" nzSm="12" nzMd="4">
                <input style="width: 240px;" type="text" name="proCss" nz-input [(ngModel)]="product.colorCd">              
            </nz-form-control>
        </nz-form-item>  
        
        <nz-form-item>
            <nz-form-label nzXs="24" nzSm="7" nzMd="4">广告款</nz-form-label>
            <nz-form-control nzXs="24" nzSm="12" nzMd="4">  
                <nz-select style="width: 240px;" [(ngModel)]="product.isAd" name="isAd" nzAllowClear nzShowSearch>
                    <nz-option [nzLabel]="isAd.text" [nzValue]="isAd.value" *ngFor="let isAd of isAds"></nz-option>              
                </nz-select>
            </nz-form-control>

            <nz-form-label nzXs="24" nzSm="7" nzMd="4">产品季</nz-form-label>
            <nz-form-control nzXs="24" nzSm="12" nzMd="4">
                <nz-select style="width: 240px;" [(ngModel)]="product.season" name="season" nzAllowClear nzShowSearch  [nzPlaceHolder]="'请选择产品季'">
                    <nz-option [nzLabel]="season.text" [nzValue]="season.value" *ngFor="let season of seasons"></nz-option>              
                </nz-select>
            </nz-form-control>
        </nz-form-item>
    </form>
</nz-card>

<nz-card [nzBordered]="false" *ngIf="tabIndex === 1">  
    <nz-form-item>    
        <nz-form-label nzXs="24" nzSm="7" nzMd="4">结算价</nz-form-label>
        <nz-form-control nzXs="24" nzSm="12" nzMd="4">
            <nz-input-number style="width: 240px;" [(ngModel)]="product.tradeDPrice" [nzFormatter]="formatterDollor" [nzParser]="parserDollor" [nzPrecision]="0" [nzMin]="0" [nzStep]="1"></nz-input-number>
        </nz-form-control> 
    </nz-form-item> 
    <nz-form-item>
        <nz-form-label nzXs="24" nzSm="7" nzMd="4">批发价</nz-form-label>
        <nz-form-control nzXs="24" nzSm="12" nzMd="4">
            <nz-input-number style="width: 240px;" [(ngModel)]="product.retailDPrice" [nzFormatter]="formatterDollor" [nzParser]="parserDollor" [nzPrecision]="0" [nzMin]="0" [nzStep]="1"></nz-input-number>
        </nz-form-control>
    </nz-form-item> 
    
    <nz-form-item>
        <nz-form-label nzXs="24" nzSm="7" nzMd="4">市场价</nz-form-label>
        <nz-form-control nzXs="24" nzSm="12" nzMd="4">
            <nz-input-number style="width: 240px;" [(ngModel)]="product.marketDPrice" [nzFormatter]="formatterDollor" [nzParser]="parserDollor" [nzPrecision]="0" [nzMin]="0" [nzStep]="1"></nz-input-number>
        </nz-form-control>
    </nz-form-item> 
    <nz-form-item>
        <nz-form-label nzXs="24" nzSm="7" nzMd="4">总部库存</nz-form-label>
        <nz-form-control nzXs="24" nzSm="12" nzMd="4">
            <nz-input-number style="width: 240px;" [(ngModel)]="product.yrStock" [nzPrecision]="0" [nzMin]="0" [nzStep]="1"></nz-input-number>
        </nz-form-control>

        <nz-form-label nzXs="24" nzSm="7" nzMd="4">代理商库存</nz-form-label>
        <nz-form-control nzXs="24" nzSm="12" nzMd="4">
            <nz-input-number style="width: 240px;" [(ngModel)]="product.agentStock" [nzPrecision]="0" [nzMin]="0" [nzStep]="1"></nz-input-number>
        </nz-form-control>
    </nz-form-item> 
    <nz-form-item>
        <nz-form-label nzXs="24" nzSm="7" nzMd="4">总部库存(sap)</nz-form-label>
        <nz-form-control nzXs="24" nzSm="12" nzMd="4">
            <nz-input-number style="width: 240px;" [(ngModel)]="product.yrStockSap" [nzPrecision]="0" [nzMin]="0" [nzStep]="1"></nz-input-number>
        </nz-form-control>

        <nz-form-label nzXs="24" nzSm="7" nzMd="4">国贸库存</nz-form-label>
        <nz-form-control nzXs="24" nzSm="12" nzMd="4">
            <nz-input-number style="width: 240px;" [(ngModel)]="product.gmStockSap" [nzPrecision]="0" [nzMin]="0" [nzStep]="1"></nz-input-number>
        </nz-form-control>
    </nz-form-item> 
    <nz-form-item>
        <nz-form-label nzXs="24" nzSm="7" nzMd="4">直营库存(sap)</nz-form-label>
        <nz-form-control nzXs="24" nzSm="12" nzMd="20">
            <nz-input-number style="width: 240px;" [(ngModel)]="product.zyStockSap" [nzPrecision]="0" [nzMin]="0" [nzStep]="1"></nz-input-number>
        </nz-form-control>
    </nz-form-item> 
    <nz-form-item>
        <nz-form-label nzXs="24" nzSm="7" nzMd="4">KA库存(sap)</nz-form-label>
        <nz-form-control nzXs="24" nzSm="12" nzMd="20">
            <nz-input-number style="width: 240px;" [(ngModel)]="product.kaStockSap" [nzPrecision]="0" [nzMin]="0" [nzStep]="1"></nz-input-number>
        </nz-form-control>
    </nz-form-item> 
    <nz-form-item>
        <nz-form-label nzXs="24" nzSm="7" nzMd="4">电零库存(sap)</nz-form-label>
        <nz-form-control nzXs="24" nzSm="12" nzMd="20">
            <nz-input-number style="width: 240px;" [(ngModel)]="product.dlStockSap" [nzPrecision]="0" [nzMin]="0" [nzStep]="1"></nz-input-number>
        </nz-form-control>
    </nz-form-item>    
</nz-card>

<nz-card [nzBordered]="false" *ngIf="tabIndex === 2"> 
    
    <form nz-form>
        <nz-form-item>
            <nz-form-label nzXs="24" nzSm="7" nzMd="4">产品上架</nz-form-label>
            <nz-form-control nzXs="24" nzSm="12" nzMd="4">
                <nz-switch name="salestatus" [(ngModel)]="saleing" nzCheckedChildren="上架" nzUnCheckedChildren="下架"></nz-switch>
            </nz-form-control>

            <nz-form-label nzXs="24" nzSm="7" nzMd="4">EAN码</nz-form-label>
            <nz-form-control nzXs="24" nzSm="12" nzMd="4">
                <input style="width: 240px;" type="text" name="eanCode" nz-input [(ngModel)]="product.eanCode">      
            </nz-form-control>
        </nz-form-item>
    </form>
    
    <form nz-form>
        <nz-form-item>
            <nz-form-label nzXs="24" nzSm="7" nzMd="4">EAN码2</nz-form-label>
            <nz-form-control nzXs="24" nzSm="12" nzMd="4">
                <input style="width: 240px;" type="text" name="eanCode2" nz-input [(ngModel)]="product.eanCode2">      
            </nz-form-control>

            <nz-form-label nzXs="24" nzSm="7" nzMd="4">标签码</nz-form-label>
            <nz-form-control nzXs="24" nzSm="12" nzMd="4">
                <input style="width: 240px;" type="text" name="code" nz-input [(ngModel)]="product.code">      
            </nz-form-control>
        </nz-form-item>
    </form>

    <nz-form-item>
        <nz-form-label nzXs="24" nzSm="7" nzMd="4">镜框材质</nz-form-label>
        <nz-form-control nzXs="24" nzSm="12" nzMd="4">
            <input style="width: 240px;" type="text" name="pfTexture" nz-input [(ngModel)]="product.pfTexture">      
        </nz-form-control>  
        
        <nz-form-label nzXs="24" nzSm="7" nzMd="4">镜框颜色</nz-form-label>
        <nz-form-control nzXs="24" nzSm="12" nzMd="4">
            <input style="width: 240px;" type="text" name="colorSpec" nz-input [(ngModel)]="product.colorSpec">      
        </nz-form-control> 

        
    </nz-form-item> 

    <nz-form-item>
        <nz-form-label nzXs="24" nzSm="7" nzMd="4">镜片材质</nz-form-label>
        <nz-form-control nzXs="24" nzSm="12" nzMd="4">
            <input style="width: 240px;" type="text" name="lensTexture" nz-input [(ngModel)]="product.lensTexture">      
        </nz-form-control>  
        
        <nz-form-label nzXs="24" nzSm="7" nzMd="4">镜片颜色</nz-form-label>
        <nz-form-control nzXs="24" nzSm="12" nzMd="4">
            <input style="width: 240px;" type="text" name="lensSpec" nz-input [(ngModel)]="product.lensSpec">      
        </nz-form-control>  
    </nz-form-item>

    <nz-form-item>
        <nz-form-label nzXs="24" nzSm="7" nzMd="4">镜腿材质</nz-form-label>
        <nz-form-control nzXs="24" nzSm="12" nzMd="4">
            <input style="width: 240px;" type="text" name="templeTexture" nz-input [(ngModel)]="product.templeTexture">      
        </nz-form-control>  
        
        <nz-form-label nzXs="24" nzSm="7" nzMd="4">镜片颜色</nz-form-label>
        <nz-form-control nzXs="24" nzSm="12" nzMd="4">
            <input style="width: 240px;" type="text" name="templeSpec" nz-input [(ngModel)]="product.templeSpec">      
        </nz-form-control>  
    </nz-form-item>

    <nz-form-item>
        <nz-form-label nzXs="24" nzSm="7" nzMd="4">产品规格</nz-form-label>
        <nz-form-control nzXs="24" nzSm="12" nzMd="4">
            <input style="width: 240px;" type="text" name="spec" nz-input [(ngModel)]="product.spec">      
        </nz-form-control> 
        
        <nz-form-label nzXs="24" nzSm="7" nzMd="4">补货日期</nz-form-label>
        <nz-form-control nzXs="24" nzSm="12" nzMd="4">
            <input style="width: 240px;" type="text" name="repDate" nz-input [(ngModel)]="product.repDate">      
        </nz-form-control>
    </nz-form-item>    
</nz-card>

<footer-toolbar errorCollect> 
    <button nz-button type="primary" nzType="primary" (click)="save()">保存</button>
</footer-toolbar>